@import './variables';

.avue-sidebar {
    user-select: none; 
    position: relative;
    padding-top: 64px;
    height: 100%;
    position: relative;
    background-color: rgb(7,26,88);//$sibarBgColor;
    background-image: url('../assets/img/bg-sidebar.png');
    background-repeat: no-repeat;
    background-position: 0 -74px;
    transition: width .2s;
    box-sizing: border-box;
    // box-shadow: 2px 0 6px rgba(0,21,41,.35);
    box-shadow: 2px 0 6px rgba(0,21,41,.2);
    &--tip{
        width:90%;
        height: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        position: absolute;
        top:5px;
        left:5%;
        color:#ccc;
        z-index: 2;
        text-align: center;
        font-size: 14px;
        background-color: rgba(0,0,0,.4);
    }
    .el-scrollbar__wrap{overflow-x:hidden;}
    .el-menu-item,
    .el-submenu__title {
        font-size: 14px;
        height: 50px;
        line-height: 50px;
    }
    .el-menu-item {
        span,i{
            // color:rgba(255, 255, 255, 0.7);
            color: #fff;
        }
        &:hover {
            // background-color: transparent;
            background-color: rgba(0, 110, 255, 0.1);
            // color: #fff;
            color:rgb(61, 209, 249);
            span,
            i {
                // color: #fff;
                color:rgb(61, 209, 249);
            }
        }
        &.is-active {
            background-color: rgba(0, 110, 255, 0.1);
            // background:url('../assets/img/bg-submenu1.png') no-repeat 10px;
            span,
            i {
                // color: #fff;
                // color: $titleColor;
                color:rgb(61, 209, 249);
                font-weight:bold;
            }
            &:hover {
                // background-color: rgba(0, 0, 0, .8);
                background-color: rgba(0, 110, 255, 0.1);
                span,
                i {
                    // color: $titleColor;
                    color:rgb(61, 209, 249);
                }
            }
            &::before {
                content: " ";
                top: 0;
                left: 0;
                bottom: 0;
                width: 4px;
                background: $mainBg;
                position: absolute;
                display:none;
            }
            &::after{
                content: '';
                top:-9px;
                right:0;
                bottom: 0;
                width: 10px;
                height:68px;
                overflow:hidden;
                // background:url('../assets/img/bg-submenu2.png') no-repeat top right;
                position:absolute;
                z-index:1;
                // border-radius: 25px 0 0 25px;
            }
        }
    }
    .el-submenu__title {
        span,i{
            // color:rgba(255, 255, 255, 0.7);
            color:#fff;
        }
        &:hover {
            i,
            span {
                // color: #fff;
                color:rgb(61, 209, 249);
            }
            background-color:transparent ;
        }
    }
    .el-submenu .el-menu-item {
        height: 50px;
        line-height: 50px;
        span,i{
            // color:rgba(255, 255, 255, 0.7);
            color:#fff;
        }
        &.is-active {
            background-color: rgba(0, 110, 255, 0.1);
            // background:url('../assets/img/bg-submenu1.png') no-repeat 10px;
            span,
            i {
                // color: #fff
                // color: $titleColor;
                color:rgb(61, 209, 249);
                font-weight:bold;
            }
            &:hover {
                // background-color: rgba(0, 0, 0, .8);
                background-color: rgba(0, 110, 255, 0.1);
                span,
                i {
                    // color: $titleColor;
                    color:rgb(61, 209, 249);
                }
            }
        }
        &:hover {
            // background-color: transparent;
            background-color: rgba(0, 110, 255, 0.1);
            span,
            i {
                // color: #fff;
                color:rgb(61, 209, 249);
            }
        }
    }
}